import { View, Text, Button } from '@tarojs/components'
import { useScreenWidthSimple } from '../../hooks/useScreenWidth'
import { defaultTabBarConfig } from '../../config/tabBarConfig'
import CustomTabBar from '../../components/CustomTabBar'
import Taro from '@tarojs/taro'
import './tabBarTest.scss'

export default function TabBarTest() {
  const screenWidth = useScreenWidthSimple()
  const { minWidthForDisplay } = defaultTabBarConfig

  const getCurrentPath = () => {
    const router = Taro.getCurrentInstance().router
    if (router?.path) {
      return router.path.startsWith('/') ? router.path.slice(1) : router.path
    }
    return 'pages/index/index'
  }

  const currentPath = getCurrentPath()

  const testNavigation = (path: string) => {
    console.log('测试导航到:', path)
    Taro.navigateTo({
      url: `/${path}`,
      success: () => {
        console.log('导航成功')
        Taro.showToast({
          title: '导航成功',
          icon: 'success'
        })
      },
      fail: (error) => {
        console.error('导航失败:', error)
        Taro.showToast({
          title: '导航失败',
          icon: 'error'
        })
      }
    })
  }

  return (
    <View className="tabbar-test">
      <View className="info-section">
        <Text className="title">TabBar功能测试</Text>
        
        <View className="info-item">
          <Text className="label">当前页面：</Text>
          <Text className="value">{currentPath}</Text>
        </View>
        
        <View className="info-item">
          <Text className="label">屏幕宽度：</Text>
          <Text className="value">{screenWidth}px</Text>
        </View>
        
        <View className="info-item">
          <Text className="label">TabBar状态：</Text>
          <Text className={`value ${screenWidth >= minWidthForDisplay ? 'show' : 'hide'}`}>
            {screenWidth >= minWidthForDisplay ? '显示' : '隐藏'}
          </Text>
        </View>
      </View>

      <View className="test-section">
        <Text className="section-title">手动测试导航</Text>
        
        <View className="button-group">
          <Button 
            className="test-button"
            onClick={() => testNavigation('pages/index/index')}
          >
            跳转到首页
          </Button>
          
          <Button 
            className="test-button"
            onClick={() => testNavigation('pages/FJ/fj')}
          >
            跳转到分类
          </Button>
          
          <Button 
            className="test-button"
            onClick={() => testNavigation('pages/Pay/Pay')}
          >
            跳转到支付
          </Button>
          
          <Button 
            className="test-button"
            onClick={() => testNavigation('pages/JZK/ditu')}
          >
            跳转到地图
          </Button>
        </View>
      </View>

      <View className="debug-section">
        <Text className="section-title">调试信息</Text>
        <Text className="debug-text">
          1. 点击上面的按钮测试手动导航是否正常
        </Text>
        <Text className="debug-text">
          2. 如果手动导航正常，说明路由配置没问题
        </Text>
        <Text className="debug-text">
          3. 如果手动导航失败，需要检查页面路径配置
        </Text>
        <Text className="debug-text">
          4. 查看控制台输出了解TabBar点击的详细信息
        </Text>
      </View>

      {/* 这里会显示CustomTabBar组件 */}
      <CustomTabBar />
    </View>
  )
}
